這次是第二次參加,
去年還懵懂無知(?)的情況下就被隊友推坑來參加鐵人賽,
去年我們是五人團,
可惜今年只剩我一人參加了XD
(PS1. 我並沒有跟去年的隊友告知說我今年有參加的這件事XD"
但也許過幾天他們就會發現了也說不定XD)
(PS2. 今年其實大家都比較忙,
但我不會說我是因為剛追完奧運就看到鐵人賽的文宣被吸引報名的XD
(為了不佔版面,我把文宣圖移到本文章最下方XD)
這也是我不敢跟團員說我有偷偷報名的原因XD)
去年的最後一篇文章有提到我那時候正好在接觸 Next.js,
是以 React 為基底的套件,
後續剛好有機會參與前端的撰寫(?)工作,
但是前期我實在吃足了苦頭,
去年的文章有提到我是寫純 HTML/CSS (跟 Javascript) 起家(?)的,
所以不要說 React,在那之前 Bootstrap 我也沒怎麼碰過,
Reactstrap 是把 Bootstrap 的語法用 React 的語法包裝起來。
但當下對我來說這些都算是剛接觸的新東西、新知識,
所以當時我幾乎是 Bootstrap, React, Reactstrap 傻傻分不清楚orz
我記得我一開始連 Bootstrap 的 mb-4, p-2 這種語法都看不懂,
更不要說 Bootstrap 很重要的 Grid 概念,
Container, Row, Col 根本不知道是什麼要怎麼用XD
(PS. 在 Bootstrap 的世界 Grid 是用 class 的方式寫成這樣:
<div class="container">
<div class="row">
<div class="col">
Column
</div>
</div>
</div>
可參考→ 網格系統 (Grid system)
我相信以上的寫法是跟我當初一樣只寫過純 HTML/CSS 比較看得懂的樣子XD)
Reactstrap 把以上的語法包裝成這樣:
<Container>
<Row>
<Col>.col</Col>
</Row>
</Container>
可參考→ Layout Components (Container, Row, Col)
但是光是這樣為什麼我會吃足苦頭,
因為帶我進門的前輩在我以上觀念都還沒建立起來時,
就直接叫我學這個寫法:
<Row>
<Col xs="6" md="4">.col-6 .col-md-4</Col>
<Col xs="6" md="4">.col-6 .col-md-4</Col>
<Col md="4">.col-md-4</Col>
</Row>
md 是什麼啦XD 這是什麼根本看不懂XD
這就跟叫剛學日語的人,而且是剛學會五十音的情況下,
就叫他學動詞變化是一樣的心情XD
所以我想要透過這 30 天的文章把我去年剛接觸 Next.js, React, Bootstrap, Reactstrap 這段歷程記錄下來,
然後最後再把學習這些東西的順序釐清出來,
除了是複習之外,
也希望讓之後跟我遇到一樣問題的人不會跟我一樣霧煞煞XD
(feat. 以寫鐵人賽之名,行表前輩之實 XDDDDDDDDDD)
其實會挑今天開賽是有特別的原因哦,
因為今天是我前公司離職滿三週年的日子!!!!!!!!
(feat. 跟現在夥伴們認識滿兩週年的日子XD)
(feat. 知世就是力量的知世生日XD)
為了慶祝 9/3 這麼意義非凡的日子,
所以我決定今年挑 9/3 開賽XD
今年沒有參加團體組,
其實我超怕我中途棄賽XD
請參加鐵人賽的各位戰友們、夥伴們多多指教(及鞭策小的)XD
去年完賽已經拿下第一面獎牌了,今年我要再拿下一面獎牌!!!!!!!!!!!!!!
Fighting!!!!!!!!!!!!!!!!!
(PS. 抱歉小戴的貼圖借我用一下XD 但怕有打廣告嫌疑這邊就不放上貼圖連結,
有興趣的大家可以自行搜尋XD)